<template>
	<div style="overflow: auto;width: 100%;">
		<table cellspacing="0" cellpadding="0" class="editabletable" style="margin-top: 5px;width:100%;">
			<thead>
				<tr>
					<th v-for="(column,index) in componentModel.children" :key="index"
						:style="{'display':column.visible ? '':'none'}" style="min-width:50px;border: 1px solid #DCDCDC;">{{column.title}}</th>	
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in data" :key="index">
					<td v-for="(column,index) in componentModel.children" :key="index"
						:style="{'display':column.visible ? '':'none'}" style="min-width:50px;border: 1px solid #DCDCDC;">
						<LabelRenderer :rowData="item" :componentModel="column.children[0]"></LabelRenderer>
					</td>
				</tr>
			</tbody>
		</table>
		<van-pagination v-model="currentPage" :total-items="total" :items-per-page="componentModel.pageSize" v-show="componentModel.pageable" @change="onChangeHandler"/>
	</div>	
</template>

<script>
	import utils from '@/utils/utils.js';
	import LabelRenderer from '@/mcomponents/datagridrenderer/LabelRenderer.vue';
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	export default {
		name: "DataGridComponent",
		props: ["componentModel"],
		components:{LabelRenderer},
		inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		data() {
			return {
				data: [],
				total:0,
				currentPage:1,
			}
		},
		methods: {
			setProp(prop) {
				for (var k in prop) {
					if (k == "tableData") {
						var selectItemMap = prop["selectItemMap"];
						var tableData = prop[k];
						if (tableData != null) {
							if (tableData["total"] != this.total) {
								this.total = tableData["total"];
							}
							var data = tableData.data;
							for (var i = 0; i < data.length; i++) {
								data[i]["selectItemMap"] = selectItemMap;
							}
							this.data=[];
							this.$nextTick(function(){
								this.data = data;
							});
						}
					}
				}
			},onChangeHandler(){
				var data={};
				data[this.componentModel.id+"_page"]=this.currentPage;
				sendComponentEventRequest(this, "paginationEvent",data);
			}
		}
	}	
</script>

<style>
</style>
